import React, { Component } from 'react'
import {NavListWrap} from '../Home'
import {get} from '../../utils/http'
import NavlistTab from 'components/navlist/NavlistTab'
import {Tabs} from 'antd'
const { TabPane } = Tabs;
export default class Navlist extends Component {
    constructor(){
        super()
        this.state={
            key:'1',
            list:[{title:'当季热推',key:'1'},
            {title:'国内游',key:'2'},
            {title:'出境游',key:'3'},
            {title:'周边游',key:'4'}]
        }
    }
  async  componentDidMount(){
        let result=await get('https://m.tuniu.com/travel/mapi/channel/getCmsChannelAjax?pageId=2698&cityCode=200')
        this.setState({
            data:result.data.data[5].gItems
        })
       // console.log(this.state.data);
        
    }
    tabClickHandler=async (params)=>{
        let index=~~params+4   
        let result=await get('https://m.tuniu.com/travel/mapi/channel/getCmsChannelAjax?pageId=2698&cityCode=200')
        this.setState({
            data:result.data.data[index].gItems
        })
   //    console.log(this.state.data);
       this.setState({
          key:params
       })     
    }
    render() {
        return (
            <NavListWrap>
                <div>
      <Tabs  activeKey={this.state.key} onTabClick={(params)=>this.tabClickHandler(params)} tabBarGutter={12} tabBarStyle={{color:'#333',fontSize:"16px"}} >
{
    this.state.list.map((value,index)=>{
     return (
         <TabPane tab={value.title} key={value.key}>
      <NavlistTab title={this.state.data}></NavlistTab>
      </TabPane>
     )
    })
}
    </Tabs>
    </div>  
            </NavListWrap>
        )
    }
}

